<template>
<div class="SearchContainer">
  <div class="topContainer">
    <div class="topContent">
      <!-- 首页 -->
      <div class="menuBar">
        <a
            :style="`color:${menu.color}`"
            v-for="menu in menuBarContent"
            :href="menu.url">{{ menu.title }}</a>
      </div>
      <el-divider />
      <!-- 分类 -->
      <div class="category">
        <span>分类:</span>
        <a v-for="category in categoryContent" style="color:#848484;" :href="`/search?searchValue=${category.name}`">
          {{category.name}}
        </a>
      </div>
      <el-divider />
      <!-- 品牌 -->
      <div class="brand">
        <span>品牌:</span>
        <a style="margin-left: 10px">360</a>
      </div>
      <el-divider />


    </div>
  </div>
  <div class="commoditiesContainer">
    <div class="commoditiesContent">
      <CommodityCard
          style="margin-right: 15px;display: flex;flex-direction: column;justify-content: center;"
          v-for="commodity in commodities"
          :commodity-bean="commodity"
      />
    </div>

  </div>

</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import router from '../../router';
import searchAPI from "../../api/search";
import {commodityModel} from "../../model/commodityModel";
import CommodityCard from "../../components/commodity/CommodityCard.vue";


const searchValue = ref('')
const menuBarContent = ref([
    {title: '首页' , url: '/',color:'#848484'} ,
    {title: '>'},
    {title: '全部搜索结果' , url: '/search',color:'#848484'},
    {title: '>'},
])
const categoryContent = ref([

])
const commodities = ref<commodityModel[]>([])

const getUrlParam = () => {
    let urlParams = router.currentRoute.value.query;
    searchValue.value = urlParams.searchValue as string || "";
}
const setMenuBar = () => {
    if (searchValue.value) {
        menuBarContent.value.push({ title: searchValue.value });
    } else {
        menuBarContent.value.push({  title: '搜索全部内容' })
    }
}

const initData = () => {
  searchAPI.getCommodityAndCategoryByCategoryName(searchValue.value)
      .then(res => {
        // console.log('res',res);
        if (res && res.data.code == 200) {
          const categoryAndCommodity = res.data.data.categoryAndCommodity;
          console.log('cac',categoryAndCommodity)
          categoryContent.value = categoryAndCommodity.category;
          commodities.value = categoryAndCommodity.commodities;
        }
      })
}

onMounted(() => {
    getUrlParam();
    setMenuBar();
    initData();
})

</script>

<style scoped>
.el-divider--horizontal{
    margin: 0 !important;
}
.SearchContainer{
    width: 100%;
    height: 100%;
}
.topContainer{
  width: 100%;
  height: 192px;
  display: flex;
  justify-content: center;
}
.topContent{
    height: 192px;
    width: 1240px;
}
.commoditiesContent{
  width: 1240px;
  display: flex;
}
.commoditiesContainer{
  width: 100%;
  height: auto;
  min-height: 80vh;
  background-color: #f3f3f3;
  margin-top: -43px;
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.menuBar{
    height: 48px;
}
.menuBar>a{
    margin-left: 10px;
}
.category{
    height: 48px;
}
.category>a{
  margin-left: 10px;
}
.category>span{
    line-height: 48px;
    margin-left: 10px;
}
.brand{
    height: 48px;
}
.brand>span{
    line-height: 48px;
    margin-left: 10px;
}
a{
    line-height: 48px;
}
a:hover{
    color: rgb(209, 227, 181);
}
el-dropdown:hover{
  border: 0 !important;
}
.el-dropdown:hover{
  border: 0 !important;
}
.commodities{
  width: 1240px;
}
</style>
